@use 'sass:color';

// Color Variables
$primary-color: #166de0;
$primary-color--hover: color.adjust($primary-color, $lightness: -10%);
$bg--gray: rgb(245, 245, 245);
$white: rgb(255, 255, 255);
$black: rgb(0, 0, 0);
$red: rgb(214, 73, 70);
$yellow: rgb(255, 255, 0);
$light-gray: rgba(0, 0, 0, 0.15);
$gray: rgba(0, 0, 0, 0.3);
$dark-gray: rgba(0, 0, 0, 0.5);
$link-color: rgb(35, 137, 215);
$transparent: rgba(0, 0, 0, 0);
$highlight-color: #fcea8d;

// Typography
$font-weight--semibold: 600;

// Page Variables
$border-gray: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
$announcement-bar-height: 40px;
$backstage-bar-height: 43px;

// Random variables
$emoji-per-row: 9; // needs to match variable `EMOJI_PER_ROW` in components/emoji_picker/constants/index.ts

// Transition timing defaults
$transition-quick: 0.12s;

// Elevations
$elevation-1: var(--elevation-1);
$elevation-2: var(--elevation-2);
$elevation-3: var(--elevation-3);
$elevation-4: var(--elevation-4);
$elevation-5: var(--elevation-5);
$elevation-6: var(--elevation-6);

// ********************
// Z-Index Management
// Central place to manage z-index values for the app, providing a consistent way to manage the stacking order.
// Great care should be taken before making changes, followed by extensive UI testing.
// Note : not all defined here are being imported, check usages
// ********************

// Since they can be used on any modal, menu or popover for now they are highest
$z-index-tooltip: 1350;

// Tour tips also open on menus, so they should be higher than menus
// Since tippy requires passing zIndex as prop, we have it as constant DEFAULT_Z_INDEX_TOUR_TIPS_POPOVER
$z-index-tour-tips-popover: 1300;
// Since tour tips are in package/components, we have also defined this in its own scss file
// backdrop are dark screen behind the tour tips with a cutout for the highlighted element
$z-index-tour-tips-backdrop: 1250;

// Since menus can appear on either popovers or modal, make it higher than them
$z-index-menu: 1100;

// Modals require attention and should be layered above other popovers
$z-index-modal: 1050;

$z-index-popover: 1200;
// Lower than popover because user group popover can open user's popover over it
$z-index-user-group-popover: 1150;

$z-index-global-header: 99;

$z-index-channel-header: 15;
